<script setup lang="ts">
import { ExtensionImage, ExtensionLink } from "@/extensions";
import { i18n } from "@/locales";
import type { Editor } from "@/tiptap";
import { computed, type Component } from "vue";

const props = defineProps<{
  editor: Editor;
  isActive: ({ editor }: { editor: Editor }) => boolean;
  visible?: ({ editor }: { editor: Editor }) => boolean;
  icon?: Component;
  title?: string;
  action?: ({ editor }: { editor: Editor }) => void;
}>();

const href = computed({
  get: () => {
    const attrs = props.editor.getAttributes(ExtensionLink.name);
    return attrs?.href || props.editor.getAttributes(ExtensionImage.name).href;
  },
  set: (href: string) => {
    props.editor.commands.setLink({ href: href, target: "_blank" });
  },
});

const target = computed({
  get() {
    const attrs = props.editor.getAttributes(ExtensionLink.name);
    return attrs?.target === "_blank";
  },
  set(value) {
    props.editor.commands.setLink({
      href: href.value,
      target: value ? "_blank" : "_self",
    });
  },
});
</script>

<template>
  <div class="image-href-wrapper">
    <input
      v-model.lazy="href"
      :placeholder="i18n.global.t('editor.common.placeholder.alt_href')"
      class="image-href-input"
    />
    <label class="image-href-label">
      <input
        v-model="target"
        type="checkbox"
        class="image-href-checkbox"
      />
      <span class="image-href-text">
        {{ i18n.global.t("editor.extensions.link.open_in_new_window") }}
      </span>
    </label>
  </div>
</template>

<style lang="scss" scoped>
.image-href-wrapper {
  display: block;
}

.image-href-input {
  display: block;
  width: 100%;
  border-radius: 0.375rem; // rounded-md
  border: 1px solid var(--editor-input-border);
  background-color: var(--editor-input-bg);
  padding: 0.375rem 0.5rem; // px-2 py-1.5
  font-size: 0.875rem; // text-sm
  color: var(--editor-input-text);

  &:hover {
    background-color: var(--editor-button-hover-bg);
  }

  &:focus {
    border-color: var(--editor-input-focus-border);
    outline: none;
    box-shadow: 0 0 0 1px var(--editor-input-focus-border);
  }
}

.image-href-label {
  margin-top: 0.5rem; // mt-2
  display: inline-flex;
  align-items: center;
}

.image-href-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem; // rounded
  border: 1px solid var(--editor-input-border);
  background-color: var(--editor-input-bg);
  cursor: pointer;
  position: relative;

  &:focus {
    box-shadow: 0 0 0 1px var(--editor-input-focus-border);
  }

  &:checked {
    background-color: var(--editor-primary-color);
    border-color: var(--editor-primary-color);

    &::after {
      content: "";
      position: absolute;
      left: 0.25rem;
      top: 0.05rem;
      width: 0.35rem;
      height: 0.6rem;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  }
}

.image-href-text {
  margin-left: 0.5rem; // ml-2
  font-size: 0.875rem; // text-sm
  color: var(--editor-text-color-secondary);
}
</style>
